<template>
	<!-- F1上半部分 -->
	<!-- 用户登陆时状态 -->
	<view class="me_top" >
		<view v-if="$phone" class="me_top_t">
		<!-- 头像个人信息部分 -->
		<view class="me_message_left" >
			<image src="../../static/detail/avatar.jpg" mode="widthFix" class="my_image"></image>
		</view>
		<view class="me_message_right">
			<text class="text">用户名:{{username}}</text>
			<text class="text">手机号:{{phone}}</text>
			<text class="text tuichu" @click="Goclear" >退出登陆</text>
		</view>
		</view>
		
		<!-- 用户未登录时状态 -->
		<view v-else class="me_top_t">
		<!-- 头像个人信息部分 -->
		<view class="me_message_left">
			<image src="../../static/detail/avatar2.jpg" mode="widthFix" class="my_image"></image>
		</view>
		<view class="me_message_right">
			<text class="text"> 用户名:用户未登录</text>
			<text class="text">手机号:登陆后获取</text>
			<text class="text tuichu" @click="GoLogin" >点击登录</text>
		</view>
		
		</view>
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				username:'用户未登录',
				phone:''
	      
			}
		},
		mounted() {
			this.username=this.$username
			this.phone=this.$phone
		
		},
		
		methods:{
			Goclear(){
				uni.removeStorageSync('username')
				uni.removeStorageSync('phone')
					uni.removeStorageSync('uid')
				
				
			},
			GoLogin(){
				uni.navigateTo({
					url:'/pages/RegisterLogin/RegisterLogin'
				})
				
			}
			
		},
		
		}
	

	
</script>

<style lang="scss">
	.me_top {
		.me_top_t{
		display: flex;
		padding: 10px;
	
		.me_message_left {
			height: 60%;
			box-sizing: border-box;
	
			.my_image {
				margin: 10px;
				width: 180rpx;
				border-radius: 50%;
			}
		}
	
		.me_message_right {
			box-sizing: border-box;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin: 10px 20px;
	
			.text {
				line-height: 60rpx;
				width: 100%;
				color: white;
				font-size: 14px;
			}
			.tuichu{
				    display: inline-block;
				    margin-top: 10px;
				text-align: center;
				border: 1px solid transparent;
				box-shadow: 4px 6px 10px black;
			}
		}
		}
	}
</style>